<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title> - SHARED ON THEMELOCK.COM</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
		pre,code { font-family:"Consolas", Courier New, Courier, monospace; padding:15px; background:#f7f7f7; margin:0px 0px 18px; border:1px solid #e5e5e5; line-height:18px; color:#000 }
code { padding:0px 3px; background-image:none; background:#f5f5f5; border:none }
pre { white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word }
	</style>
</head>


<body>
	<div class="container">
	  <h3 class="center alt"> Documentation by &ldquo;Ansonika&rdquo; v1.0</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;VANNO - HTML Site template&rdquo;</h1>
		
		<div class="borderTop">
		  <div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 30 OCTOBER 2018<br>
                    Lat udpate: - <br>
					By: Ansonika</strong>
			  </p>
	    </div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions, please post a comment on item page. If you are happy with the theme, please <strong>TAKE A MOMENT TO RATE IT</strong> from your DOWNLOADS PAGE.
Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files, Structure and basic modifications</a></li>
<li><a href="#php">PHP contact form, newsltetter form and plan a visit form</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#credits">Sources and Credit</a></li>
             <li><a href="#updates">UPDATES</a></li>
		</ol>
   

      <hr>
        
  <h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
	  <p> This theme has a fixed centered layout 1170px. It's based on Boostrap 4 framework grid. It's ULTRA RESPONSIVE!!. 
	  The item comes with SASS files for the primary styles.</p>
<hr>

		<h3 id="cssFiles"><strong>B) CSS Files Structure and basic modfication</strong> - <a href="#toc">top</a>	  </h3>
	  <p>The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. 
      <strong>We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply.</strong>
      Below how the file is organized:</p>
<p>1. SITE STRUCTURE and TYPOGRAPHY<br>
  - 1.1 Typography<br>
  - 1.2 Buttons<br>
  - 1.3 Structure</p>
<p>2. CONTENT<br>
  - 2.1 Home<br>
  - 2.2 Listing<br>
  - 2.3 Detail page<br>
  - 2.4 Write a review page<br>
  - 2.5 Login/register<br>
  - 2.6 Company landing <br>
  - 2.7 Pricing page<br>
  - 2.8 Faq/help<br>
  - 2.9 Contacts<br>
  - 2.10 Company categories<br>
  - 2.11 User Dashboard<br>
  - 2.12 About</p>
<p>3. COMMON<br>
  - 3.1 Misc<br>
  - 3.2 Spacing<br>
  - 3.3 Cookie bar<br>
  - 3.4 Sing In Modal</p>
<pre>
<p><strong>Note<br></strong>Some pages required additional specific css in the header, for example in the blog page.<br>&lt;!-- SPECIFIC CSS --&gt;<br>&lt;link href=&quot;css/blog.css&quot; rel=&quot;stylesheet&quot;&gt;</p><p>The item comes with SASS  files.</p></pre>
<p><strong>Change the logo<br>
</strong>To change the logo, simply use your PNG24 file (suggested logo height is 36/40px). Below how is coded</p>
<pre>&lt;div id=&quot;logo&quot;&gt;<br>	&lt;img src=&quot;img/logo.svg&quot; width=&quot;140&quot; height=&quot;35&quot; alt=&quot;&quot; class=&quot;logo_normal&quot;&gt;<br>	&lt;img src=&quot;img/logo_sticky.svg&quot; width=&quot;140&quot; height=&quot;35&quot; alt=&quot;&quot; class=&quot;logo_sticky&quot;&gt;<br>&lt;/div&gt;</pre>

<p><strong>Control the opacity of the header images</strong><br>
<pre>You can control the opacity (ora gradient) of the header images via css, in css/style.css change the opacity here:	
	
.hero_in.version_1 .wrapper {<br>  background-color: black;<br>  background-color: rgba(0, 0, 0, 0.6);<br>}<br>.hero_single.version_2 .wrapper {<br>  background: rgba(0, 0, 0, 0.4);<br>  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4), transparent);<br>  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);<br>  text-align: left;<br>}<br>.hero_single.version_3 .wrapper {<br>  background-color: black;<br>  background-color: rgba(0, 0, 0, 0.6);<br>}
.hero_single.version_company .wrapper {<br>  background-color: black;<br>  background-color: rgba(0, 0, 0, 0.6);<br>  text-align: left;<br>}
.hero_single.general .wrapper {<br>  background: rgba(0, 0, 0, 0.6);<br>  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), transparent);<br>  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);<br>  text-align: center;<br>}
.hero_single.office .wrapper {<br>  background: rgba(0, 0, 0, 0.9);<br>  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.9), transparent);<br>  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);<br>  text-align: center;<br>}</pre>


<p><strong>Cookies bar alert (GDPR)</strong></p>
<pre>1) Open js/jquery.cookiebar.js

2) Edit the message here:
message: 'We use cookies to track usage and preferences.', //Message displayed on bar

3) Edit the path of the privacy page here:
policyURL: '#', //URL of Privacy Policy<br>
</pre>

<p><strong>Disable the sticky sidebar </strong>(grid-listings-filterscol.html)</p>
<pre>Just simply remove the id=&quot;sidebar&quot; here:
&lt;aside class=&quot;col-lg-3&quot; id=&quot;sidebar&quot;&gt;<br>
</pre>


      
<p><strong>THE GRID</strong><br> 
      Please refer to this <a href="http://getbootstrap.com/">documentation Boostrap</a></p>
    
      <hr>
<br>
      <h3 id="php"><strong>C) PHP files: Contact, Newsletter forms</strong> - <a href="#php">top</a></h3>
      <p>All the files you need are located in assets folder. If you need to change the allert messages open assets/validate.js. Below an example taken from contact.php; all the files are well commented. Please follow the comments on code.<br>
      <br>
        <img src="assets/images/contacts.jpg" alt="" width="759" height="476" style="border:1px solid #ccc;">      </p>
      </p>
      <p><strong>Contact form<br>
        </strong>It's the same logic and script of check newsletter. If you doesn't recieve the email please first check:<br>
      1) Your spam folder<br>
      2) If you hosting requires special settings (SMTP Authentication is not supported by the script)<br>
      3) If your email  has to be managed from the same hosting provider<br>
      4) Set the permission of the asset folder on your host to 755 your FTP client
      </p>


      <hr>
<h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>
		
	  <p>This theme use these Javascript (minified versions included). i've included the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).</p>
      <p><strong>common_scripts.js content:
      </strong>      
      <ul>
      <li>Popper.js</li>
      <li>Boostrap.js</li>
      <li>Wow.js</li>
      <li>Owl.carousel.js</li>
      <li>MagnificPopup.js</li>
      <li>Theia-sticky-sidebar.js</li>
      <li>ResizeSensor.js</li>
      <li>Sticky-kit.js</li>
       <li>jQuery Mmenu</li>
       <li>jQuery Show hide passoword</li>
       <li>jQuery Nice Select </li>
       <li>Rangeslider</li>
      </ul>
      </p>
<hr>
		
		<h3 id="credits"><strong>E) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
	  <p>I've used the following images, icons or other files as listed. For the js listed below, you can find the <strong>more documentation</strong> on the relative sites.
		
	  <ul>
        <li><a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a></li>
        <li><a href="http://fontello.com/">Fontello</a></li>
        <li><a href="http://mynameismatthieu.com/WOW">Wow</a></li>
        <li><a href="http://daneden.github.io/animate.css/">Animate.css</a></li>
        <li><a href="http://jquery.com/">Jquery</a></li>
        <li><a href="http://owlgraphic.com/owlcarousel/">Owl carousel</a></li>
        <li><a href="http://www.primebox.co.uk/projects/jquery-cookiebar/">Jquery Cookie bar</a></li>
        <li><a href="http://www.daterangepicker.com/">Datepicker</a></li>
        <li><a href="http://leafo.net/sticky-kit/">Sticky horizontal</a></li>
        <li><a href="https://github.com/WeCodePixels/theia-sticky-sidebar">Theia Sticky Sidebar </a></li>
        <li><a href="https://modernizr.com/">Modernizr</a></li>
        <li><a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific popup</a></li>
        <li><a href="https://github.com/FrDH/jQuery.mmenu">MMenu mobile menu</a></li>
        <li><a href="https://github.com/andreruffert/rangeslider.js">Range slider</a></li>
        <li><a href="http://isotope.metafizzy.co">Isotope</a></li>
	  </ul>
<p>Images are not included.</p>
        
        <hr>
        <h3 id="updates"><strong>E) Updates</strong> - <a href="#toc">top</a></h3>

      <hr>

<h3>Maybe you are interested in</h3>
<p><a href="https://themeforest.net/item/sparker-directory-and-listings-template/22716006?ref=ansonika"><img src="assets/images/01-sparker-directory-listings-template.jpg" width="590" height="300"></a></p>
<p><a href="https://themeforest.net/item/panagea-travel-and-tours-listings-template/21957086?ref=ansonika"><img src="assets/images/01-panagea-tours-hotels-restaurants-listing.jpg" width="590" height="300"></a></p>
<p><a href="https://themeforest.net/item/citytours-city-tours-tour-tickets-and-guides/10715647?ref=ansonika"><img src="assets/images/01-citytours-travel-hotel-tour-template.__large_preview.jpg" width="590" height="300"></a></p>
<p><a href="https://themeforest.net/item/travelguide-travel-guides-places-and-directions/17323444?ref=ansonika"><img src="assets/images/01-travelguide-travel-site-template.jpg" width="590" height="300"></a></p>


<p><strong><br>
    <img src="assets/images/avatar.jpg" width="80" height="80"><br>
	  <br>
    Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.</strong><br> 
		  
<h3>Need support?</h3>
For support contact me using the form on my profile page <span class="text_medium">with subject <strong>[ThemeForest Support]  Template name</strong></span>, or submit a comment on item page. You will receive an answer within 24-48 hours (working days)  GMT  +1.
<ul>
<li>I only provide support for fixing bugs or small issues on my items.</li>
<li>I don't provide free support for additional custom modifications to the items.</li>
<li>Please provide your site link, screenshots and other information about your issue.</li>
<li><a href="http://themeforest.net/page/item_support_policy" rel="nofollow"><strong>Envato support terms</strong></a></li>
</ul>

<h3>Need customization or availability for freelance projects?</h3>
Just send an email via profile page form; please don't forget to specify:
<ul>
<li>if you are a company, agency or private user</li>
<li>all the information about your projects, needs, site urls, project sheet, etc..</li>
<li>from which country you are</li>
<li>if you have a deadline</li>
<li>if you have basic knowledge of  HTML , CSS, JS,  PHP</li>
</ul>
<p class="append-bottom alt large"><strong>Ansonika</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>